
<template>
    <div>
        <el-table ref="multipleTableRef" :data="data" style="width: 100%">
            <el-table-column v-for="item in columns" :property="item.dataIndex" :label="item.title" :width="item.width" />
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import { ref, onMounted } from 'vue'
const props = defineProps({
    bar: {
        type: Number,
        required: true
    },
    rowKey: {
        type: [String, Function],
        default: 'key'
    },
    data: {
        type: Array,
        required: true
    },
    columns: {
        type: Array<any>,
        required: true
    },
    pageNum: {
        type: Number,
        default: 1
    },
    pageSize: {
        type: Number,
        default: 10
    },
    showSizeChanger: {
        type: Boolean,
        default: true
    },
    size: {
        type: String,
        default: 'default'
    },
    /**
     * alert: {
     *   show: true,
     *   clear: Function
     * }
     */
    alert: {
        type: [Object, Boolean],
        default: null
    },
    rowSelection: {
        type: Object,
        default: null
    },
    /** @Deprecated */
    showAlertInfo: {
        type: Boolean,
        default: false
    },
    showPagination: {
        type: String,
        default: 'auto'
    },
    /**
     * enable page URI mode
     *
     * e.g:
     * /users/1
     * /users/2
     * /users/3?queryParam=test
     * ...
     */
    pageURI: {
        type: Boolean,
        default: false
    }
})

defineOptions({
    name: 'STable',
})
onMounted(() => {
    console.log(`the component is now mounted.`, props)
})

</script>

<style scoped></style>